<template>
  <div class="box">
    <h1 class="p-30 fs-36">B组件----选项式API,{{n}}</h1>
    <van-button type="primary" @click="handlePlus">数字++</van-button>
    <van-button type="info" @click="handleAdd">新增商品</van-button>
    <div v-for="(item,index) in goods" :key="index">
      名称:{{item.name}}
      价格:{{item.price}}
      库存:{{item.n}}
    </div>
  </div>
</template>

<script>
  export default {
    //状态机数据必须在computed中提取
    computed: {
      n() {
        return this.$store.state.count.num 
      },
      goods(){
        return this.$store.state.goods.goods
      }
    },
    methods: {
      handlePlus() {
        this.$store.commit('count/plus',10)  //触发mutations
      },
      handleAdd(){
        this.$store.commit('goods/goodsAddMut',{
          name:'新的商品',
          price:(Math.random()*900+100).toFixed(2),
          n:1
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.box{
  width: 50%;
  height: 500px;
  float: left;
  box-sizing: border-box;
  border: 1px solid #333;
}
</style>